<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档处理</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $("#add").click(function(){
                let inText = $("#inText").val();
                let li = "<li>"+inText+"</li>";
                // $("ul").html($("ul").html()+li);
                // 将参数中的对象追加到方法调用者所对应的元素的标签体的末尾
                // 注意点:此时的方法调用者必须是jquery对象,但是参数可以是jquery对象,也可以是DOM对象
                // $("ul").append(li);
                // $("ul").append($(li));
                // 注意点:此时的方法调用者必须是jquery对象,但是参数可以是jquery对象,也可以是DOM对象
                // $(li).appendTo($("ul")[0]);

                // $("li:last").after(li);
                // $(li).insertAfter($("li:last"));
                // $("li:first").before(li);
                $(li).insertBefore($("li:first"));
            });
            $("li").click(function(){
                // let li = "<li>"+$(this).html()+"</li>";
                // let li = $(this).clone();
                // 方法存在参数,默认值为false
                // true:表示克隆元素的同时克隆事件
                // false:只克隆元素,不克隆事件
                let li = $(this).clone(true);
                $("ul").append(li);
            });
            $("#delete").click(function(){
                // 删除指定元素
                $("ul").remove();
            });
            $("#clear").click(function(){
                // 清空指定元素
                // 即:删除指定元素所有标签体内容
                $("ul").empty();
                // $("ul").html("");
            });
        })
    </script>
</head>
<body>
<input type="text" id="inText">
<button id="add">追加</button>
<button id="delete">删除列表</button>
<button id="clear">清空列表</button>
<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ul>
</body>
</html>